<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色列表</title>

		<script src="../js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<h1 align="middle" style="font-size: 50px">角色列表</h1>
		<div align="middle">
			<table id="table" border="1" height="70px" width="1000" style="text-align: center;">
				<t>
					<td>选择</td>
					<td>角色ID</td>
					<td>角色名称</td>
				</t>
				<tr v-for="role in roleList">
					<td><input type="checkbox" class="RadioItem" :id="role.id" :value="role.id" /></td>
					<td>{{role.id}}</td>
					<td>{{role.name}}</td>
				</tr>
			</table>
			<div align="middle">
				<button id="add" @click="add" style="height: 30px;width: 50px; text-align: center;">
					新增
				</button>
				<button id="update" @click="update" style="height: 30px;width: 50px; text-align: center;">
					修改
				</button>
				<button id="delete" @click="delete" style="height: 30px;width: 50px; text-align: center;">
					删除
				</button>
				<div id="roleSelectList" v-show="isShow">
					<span>请选择修改的角色:</span>
					<select v-model="selectText" @change="changeProduct(selectText)">
						<option :id="role.id" v-for="role in roleList">{{role.name}}</option>
					</select>
				</div>
				<div id="text1" v-show="isShow">
					<span>{{textName1}}</span>
					<input type="text" height="70px" v-model="roleName" :placeholder="placeholderText" />
				</div>
				<button id="confirm" @click="confirm" v-show="isShow">
					确定
				</button>
				<button id="cancel" @click="cancel" v-show="isShow">
					取消
				</button>
			</div>
		</div>
	</body>


	<!-- 
	*  var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
	*  let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
	*  const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
	 -->
	<script>
		window.onload = function() {

			// 公共 vue
			var publicVue = new Vue({
				methods: {
					post(url, datas) {
						this.$http.post(url, datas, {
							emulateJSON: false
						}).then(function(backdatas) {
							if (backdatas.body.code == 400) {
								alert('增加失败!角色已存在');
							} else {
								alert('添加成功');
								location.reload();
							}
						});
					},
				},
			});

			// 表格vue
			var table = new Vue({
				el: '#table',
				data: {
					roleList: {},
				},
				methods: {
					get: function() {
						var url = 'http://localhost:8080/attendance-service/HDBRole?method=findAllRole';
						this.$http.get(url).then(function(backdatas) {
							// 拿到code码
							var code = backdatas.body.code;
							
							// 拿到后台返回的数据
							var dataR = backdatas.body.data;
							
							// 把 dataR 给 table的roleList属性
							table.roleList = dataR;
							roleSelectList.roleList = dataR;
							console.log("success...")
						});
					},
				}
			});

			// 输入框vue
			var text1 = new Vue({
				el: '#text1',
				data: {
					roleName: '',
					isShow: false,
					textName1: '',
					placeholderText: '',
					textValue: '',
				}
			});
			
			// 单选列表
			var roleSelectList = new Vue({ 	
				el: '#roleSelectList',
				data: {
					isShow: false,
					roleList: {},
					selectText: '请选择',
				},
				methods: {
					
				},
			});
			
			// 新增按钮vue
			var add = new Vue({
				el: '#add',
				methods: {
					add() {
						cancel.cancel();
						text1.isShow = "false";
						text1.placeholderText = '请输入要添加的角色名称';
						confirm.isShow = true;
						cancel.isShow = true;
					},
				}

			});
			
			// 修改按钮vue
			var update = new Vue({
				el: '#update',
				methods: {
					update() {
						cancel.cancel();
						roleSelectList.isShow = true;
						text1.isShow = true;
						confirm.isShow = true;
						cancel.isShow = true;
						text1.placeholderText = '请输入修改后的角色名称';
					},
				},
			});
			
			// 确认按钮vue
			var confirm = new Vue({
				el: '#confirm',
				data: {
					isShow: false,
				},
				methods: {
					confirm() {
						
						if(roleSelectList.isShow == false){
							// 如果是false,说明用户点击了新增的确认按钮
							// 拿到了text11的值
							var roleName1 = text1.roleName;
							var roleName = '';
							roleName = roleName1;
							const map = {
								'method': 'add',
								'roleName': roleName
							};
							var url = "http://localhost:8080/attendance-service/HDBRole";
							publicVue.post(url, map);
						}else{
							// 用户点击了修改的确认按钮
							var a = roleSelectList.selectText;
							
							
							var roleName1 = text1.roleName;
							var roleName = '';
							roleName = roleName1;
							const map = {
								'method': 'update',
								'roleName': roleName
							};
							var url = "http://localhost:8080/attendance-service/HDBRole";
							publicVue.post(url, map);
						}
						
					},
				},
			});

			// 取消按钮
			var cancel = new Vue({
				el: '#cancel',
				data: {
					isShow: false,
				},
				methods: {
					cancel() {
						confirm.isShow = false;
						cancel.isShow = false;
						text1.isShow = false;
						roleSelectList.isShow = false;
						
					},
				}
			});

			// 刷新表格
			table.get();


		}
	</script>

</html>
